<template>
	<div>
		<CustomDialog
			:title="state.dialog.title"
			v-model:visible="state.dialog.isShowDialog"
			dialogWidth="900px"
			@close="closeDialog"
			:dialogFooterBtn="true"
		>
			<el-table :data="state.goodsSpec" style="width: 100%">
				<el-table-column label="商品信息" min-width="150">
					<template #default="scope">
						<div class="flex goods-item">
							<div style="width: 80px; height: 80px">
								<el-image :src="STATIC_URL + scope.row.image" />
							</div>
							<div class="right ml15 flex-center-content">
								<div class="goods-sku-text">
									<span v-for="(sku, index) in scope.row.specification" :key="sku" :class="{ ml5: index != 0 }"> {{ sku.value }} </span>
								</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="积分现金" show-overflow-tooltip prop="exchangeScore"> </el-table-column>
				<el-table-column prop="sales" label="销量" show-overflow-tooltip></el-table-column>
				<el-table-column prop="stock" label="库存" show-overflow-tooltip></el-table-column>
				<el-table-column label="是否参与" show-overflow-tooltip>
					<template #default="scope">
						<el-tag type="primary" v-if="scope.row.enable == 1">已参加</el-tag>
						<el-tag type="danger" v-else>未参加</el-tag>
					</template>
				</el-table-column>
			</el-table>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">关闭</el-button>
				</span>
			</template>
			<!-- </el-dialog> -->
		</CustomDialog>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { STATIC_URL } from '/@/utils/config';
const state = reactive({
	goodsSpec: [] as any[],
	item: {} as any,
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

const onCancel = () => {
	closeDialog();
};

// 关闭弹窗
const closeDialog = () => {
	console.log('关闭窗口');
	state.dialog.isShowDialog = false;
};

const openDialog = async (datas: []) => {
	console.log('datas: ', datas);
	state.goodsSpec = datas;
	state.dialog.isShowDialog = true;
};

defineExpose({ openDialog });
</script>

<style scoped>
.product-info {
	display: flex;
	align-items: center;
}

.product-image {
	width: 50px;
	height: 50px;
	object-fit: cover;
	margin-right: 10px;
	border-radius: 4px;
}

.product-details {
	display: flex;
	flex-direction: column;
	font-size: 14px;
}

.title {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--sd-font);
}

.sa-table-line-1 {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	height: 23px;
	line-height: 23px;
}

.sa-goods.goods-scoreShop .subtitle {
	height: 16px;
	line-height: 16px;
	font-size: 12px;
	font-weight: 400;
	color: var(--sd-subfont);
}

.goods-more-spec {
	padding: 5px 5px !important;
}

.flex-center-content {
	align-items: center;
	display: flex;
	justify-content: center;
}
</style>
